import { useRef } from 'react';
import { LockOutlined, MailOutlined } from '@ant-design/icons';
import {
  LoginForm,
  ProFormCaptcha,
  ProFormText,
} from '@ant-design/pro-components';
import { message } from 'antd';
import { history, useModel } from 'umi';

import request from '@/utils/request';
import { storage } from '@/utils/storage';

const backStyle = {
  backgroundColor: 'white',
  width: '40%',
  height: '50%',
  margin: 'auto',
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
};

export default () => {
  const { setInitialState } = useModel('@@initialState');
  // const [loginType, setLoginType] = useState('phone');
  const emailRef = useRef();

  return (
    <div
      style={{
        backgroundImage:
          'url("https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png")',
        height: '100vh',
      }}
    >
      <div style={backStyle}>
        <LoginForm
          title="代码圈复杂度检测"
          subTitle="一站式复杂度分析平台"
          onFinish={(values) => {
            request('/login', {
              method: 'POST',
              data: values,
            }).then((res) => {
              const { data } = res;
              if (res.success) {
                storage.setItem({
                  key: 'user',
                  value: data.email,
                  expires: 7 * 24 * 60 * 60 * 1000,
                });
                setInitialState((s) => ({ ...s, currentUser: data }));
                setTimeout(() => history.push('/code/store'), 0);
              }
            });
          }}
        >
          {/* <Tabs
            centered
            activeKey={loginType}
            onChange={(activeKey) => setLoginType(activeKey)}
          >
            <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
            <Tabs.TabPane key={'phone'} tab={'邮箱登录'} />
          </Tabs>
          {loginType === 'account' && (
            <>
              <ProFormText
                name="username"
                fieldProps={{
                  size: 'large',
                  prefix: <UserOutlined className={'prefixIcon'} />,
                }}
                placeholder={'用户名: admin or user'}
                rules={[
                  {
                    required: true,
                    message: '请输入用户名!',
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={'prefixIcon'} />,
                }}
                placeholder={'密码: ant.design'}
                rules={[
                  {
                    required: true,
                    message: '请输入密码！',
                  },
                ]}
              />
            </>
          )} */}
          {/* {loginType === 'phone' && ( */}
          <>
            <ProFormText
              fieldProps={{
                size: 'large',
                prefix: <MailOutlined className={'prefixIcon'} />,
              }}
              name="email"
              placeholder={'邮箱'}
              onChange={(v) => {
                emailRef.current = v.target.value;
              }}
              rules={[
                {
                  required: true,
                  message: '请输入邮箱！',
                },
                {
                  pattern:
                    /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/g,
                  message: '邮箱格式错误！',
                },
              ]}
            />
            <ProFormCaptcha
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              captchaProps={{
                size: 'large',
              }}
              placeholder={'请输入验证码'}
              captchaTextRender={(timing, count) => {
                if (timing) {
                  return `${count} ${'获取验证码'}`;
                }
                return '获取验证码';
              }}
              name="captcha"
              rules={[
                {
                  required: true,
                  message: '请输入验证码！',
                },
              ]}
              onGetCaptcha={async () => {
                const email = emailRef.current;
                request('/api/captcha', {
                  method: 'GET',
                  params: {
                    email,
                  },
                }).then((res) => {
                  res.success &&
                    message.success('验证码发送成功！请及时到邮箱查看');
                });
              }}
            />
          </>
          {/* )} */}
        </LoginForm>
      </div>
    </div>
  );
};
